<template>
    <div>
      <!-- banner -->
      <div class="banner_about">
        <div>常见问题</div>
      </div>
      <!-- 侧边导航 -->
      <div class="j_sideNav" style="height: 291px;" id="j_sideNav_faq">
        <ul id="j_box">
          <li @click="jump (0)">
            <a href="javascript:;" :class="{'active':ind == 0}">
              <i :class="{'j_active':jind == 0}"></i>
              关于公司
            </a>
          </li>
          <li @click="jump (1)">
            <a href="javascript:;" :class="{'active':ind == 1}">
              <i :class="{'j_active':jind == 1}"></i>
              关于外汇
            </a>
          </li>
          <li @click="jump (2)">
            <a href="javascript:;" :class="{'active':ind == 2}">
              <i :class="{'j_active':jind == 2}"></i>
              关于开户
            </a>
          </li>
          <li @click="jump (3)">
            <a href="javascript:;" :class="{'active':ind == 3}">
              <i :class="{'j_active':jind == 3}"></i>
              关于交易
            </a>
          </li>
          <li @click="jump (4)">
            <a href="javascript:;" :class="{'active':ind == 4}">
              <i :class="{'j_active':jind == 4}"></i>
              关于MT4平台
            </a>
          </li>
          <li>
            <router-link to="/fxknowledge">
              <i></i>
              返回上一级
            </router-link>
          </li>
        </ul>
      </div>
      <!-- text -->
      <div class="faq">
        <div class="faq_text">
          <ul>
            <!-- 关于公司 -->
            <li class="d_jump_faq" ref="d_jump_faq" v-for="(a,index) in goods">
              <h1>{{a.title}}</h1>
              <div class="faqtext" v-for="b in a.faq">
                <div><img src="./images/q.png" alt=""><p>{{b.f}}</p></div>
                <div><img src="./images/a.png" alt=""><p>{{b.q}}</p></div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
</template>

<script type="text/ecmascript-6">
  const ERR_OK = 200;
  export default{
    data() {
      return{
        ind: 0,
        jind: 0,
        goods: {},
        contOffsetDown: [],
        contOffsetUp: []
      }
    },
    mounted: function () {
      let that=this;
      this.$nextTick(function () {
        setTimeout(function(){
          that.getContOffset();
          window.addEventListener('scroll', that.onScroll);
        },50)
      })
    },
    created() {
      this.$http.get('../../../static/data.json').then((response) => {
        if (response.status === ERR_OK) {
          response = response.body;
          this.goods = response.seller;
        };
      });
    },
    methods:{
      getContOffset(){ // 楼层滚动
//        let cont = document.querySelectorAll('.d_jump_faq');
        let cont = this.$refs.d_jump_faq;
        for (var i = 0; i < cont.length; i++) {
          this.contOffsetDown.push(cont[i].offsetTop - (window.screen.height) / 2);
          this.contOffsetUp.push(cont[i].offsetTop + cont[i].offsetHeight - 200);
        }
      },
      onScroll () {
        let scrolled = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
        let querySelecto = document.querySelector('#j_sideNav_faq');
        let side = querySelecto;
        for (var i = 0; i < this.contOffsetDown.length; i++) {
          // 滚的距离大于第一个小于第二个
          if (scrolled >= this.contOffsetDown[i] && scrolled < this.contOffsetDown[i+1]) {
            this.jind = i;
            this.ind = i;
          }else if(scrolled >= this.contOffsetDown[this.contOffsetDown.length-1]){
            this.jind = this.contOffsetDown.length-1;
            this.ind = this.contOffsetDown.length-1;
          }
        }
        this.scrolled = scrolled;
        if(scrolled >= 2800){
          side.style.bottom = '70%';
        }else if(scrolled <= 300){
          side.style.top = '50%';
        }else if(scrolled <= 800 && scrolled >= 300){
          side.style.top = '20%';
        }else if(scrolled <= 2500 && scrolled >= 800){
          side.style.bottom = '10%';
        }else{
          side.style.top = '10%';
        }
      },
      jump (index) {
        this.ind = index;
        this.jind = index;
        // 用 class="d_jump" 添加锚点
        let jump = document.querySelectorAll('.d_jump_faq');
        let total = jump[index].offsetTop;
        let distance = document.documentElement.scrollTop || document.body.scrollTop;
        // 平滑滚动，时长500ms，每10ms一跳，共50跳
        let step = total / 50;
        if (total > distance) {
          smoothDown();
        } else {
          let newTotal = distance - total;
          step = newTotal / 50;
          smoothUp();
        }
        function smoothDown () {  //向下滚动
          if (distance < total) {
            distance += step;
            document.body.scrollTop = distance;
            document.documentElement.scrollTop = distance;
            setTimeout(smoothDown, 10);
          } else {
            document.body.scrollTop = total;
            document.documentElement.scrollTop = total;
          }
        }
        function smoothUp () {  //向上滚动
          if (distance > total) {
            distance -= step;
            document.body.scrollTop = distance;
            document.documentElement.scrollTop = distance;
            setTimeout(smoothUp, 10);
          } else {
            document.body.scrollTop = total;
            document.documentElement.scrollTop = total;
          }
        }
      }
    }
  }
</script>

<style scoped>
  .banner_about{
    height: 411px;
    width: 100%;
    background: url("../../../static/images/banner_min.jpg") no-repeat;
    overflow: hidden;
  }
  .banner_about div{
    padding-top:228px;
    width:1085px;
    margin:0 auto;
    font-size: 48px;
    color: #fff;
    box-sizing: border-box;
  }
  .faq{
    width: 1200px;
    margin: 50px auto 0;
  }
  .faq_text{
    width: 850px;
    margin-left: 55px;
  }
  .faq_text ul li{
    margin-top: 50px;
  }
  .faq_text ul li h1{
    color: #ff9c00;
    font-size: 32px;
    margin-bottom: 30px;
  }
  .faq_text ul li .faqtext{
    margin: 30px 0;
  }
  .faq_text ul li .faqtext div img{
    display: inline-block;
    vertical-align: top;
  }
  .faq_text ul li .faqtext div:nth-child(1) p{
    font-size: 20px;
    color: #333;
  }
  .faq_text ul li .faqtext div:nth-child(2) p{
    font-size: 16px;
    color: #333;
  }
  .faq_text ul li .faqtext div p{
    display: inline-block;
    width: 805px;
    margin-left: 18px;
    line-height: 25px;
  }
  .j_sideNav{
    width:220px;
    height:195px;
    position:fixed;
    bottom:10%;
    right: 17%;
    background: url("./images/e.png") no-repeat 27px 8px;
  }
  .j_sideNav ul li{
    margin-left:20px;
    height:54px;
  }
  .j_sideNav ul li a i{
    display:inline-block;
    width:16px;
    height:16px;
    background:url('./images/mpie.png') no-repeat;
    margin-right: 25px;
  }
  .j_sideNav ul li a i.j_active{
    display:inline-block;
    width:16px;
    height:16px;
    background:url('./images/pie.png') no-repeat;
    background-size: 100% 100%;
  }
  .j_sideNav ul li a{
    font-size:20px;
    color:#636363;
    display:block;
  }
  .j_sideNav ul li a:hover,.j_sideNav ul li a:link{
    text-decoration: none;
  }

  .j_sideNav ul li a.active{
    color:#ff9c00;
  }
  @media (min-width: 1024px){
    .j_sideNav{
      right: 2%;
    }
  }
  @media (min-width: 1100px) {
    .j_sideNav{
      right: 2%;
    }
  }
  @media (min-width: 1366px){
    .j_sideNav{
      right: 2%;
    }
  }
  @media (min-width: 1440px) {
    .j_sideNav{
      right: 5%;
    }
  }
  @media (min-width: 1680px){
    .j_sideNav{
      right: 10%;
    }
  }
</style>
